<template>  
  <el-header class="heade">
      <HeaderDemo />
  </el-header>
  <div class="market-container">
      <!-- 背景图部分 -->
      <div class="background-image">
          <img src="/imgs/素材1.jpg" alt="顶部背景图" class="top-image" />
          <!-- 搜索框 -->
          <div class="search-container">
              <input type="text" v-model="searchQuery" @input="filterNovelsBySearch" placeholder="搜索小说、作者、标签..." class="search-input" />
          </div>
      </div>

      <!-- 固定的分类部分 -->
      <div class="category">
          <!-- 类别分类 -->
          <div class="category-group">
              <span class="category-title">类型:</span>
              <ul class="category-list">
                  <li v-for="(category, index) in categoryList" :key="index" :class="{ selected: selectedCategory === category }" @click="filterCategory(category)">
                      {{ category }}
                  </li>
              </ul>
          </div>

          <!-- 题材分类 -->
          <div class="theme-group">
              <span class="category-title">题材:</span>
              <ul class="theme-list">
                  <li v-for="(theme, index) in themeList" :key="index" :class="{ selected: selectedTheme === theme }" @click="filterTheme(theme)">
                      {{ theme }}
                  </li>
              </ul>
          </div>
      </div>

      <!-- 小说展示部分 -->
      <div class="novel-display">
          <div v-if="filteredNovels.length === 0" class="no-results">
              <p>没有找到符合条件的作品，请尝试其他搜索或筛选条件。</p>
          </div>

          <div class="novel-card" v-for="(novel, index) in filteredNovels" :key="index " @click="navigateToWorkProfile(novel.wid)">
              <img :src="'http://localhost:8080/api/images/' + novel.image" alt="小说封面" class="novel-image" />
              <div class="novel-info">
                  <h3 class="novel-title">{{ truncateTitle(novel.title) }}</h3>
                  <p class="novel-description">简介： {{ truncateDescription(novel.description) }}</p>
                  <p class="novel-tags">标签: {{ truncateTags(novel.tags) }}</p>

              </div>
          </div>
      </div>

      <FooterComp />
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router'; // 引入 Vue Router
import axios from 'axios';
import FooterComp from '../components/FooterComp.vue';
import HeaderDemo from '../components/HeaderDemo.vue';

// 响应式数据
const searchQuery = ref('');
const selectedCategory = ref('全部');
const selectedTheme = ref('全部');

// 初始化类别和题材列表
const categoryList = ref(['全部']);
const themeList = ref(['全部']);

// 小说列表
const novels = ref([]);

// 使用 Vue Router
const router = useRouter();

// 导航到剧本详情页
const navigateToWorkProfile = (wid) => {
  router.push({ name: 'WorkProfile', params: { id: wid } });
};

// 获取固定的本地图片路径
const getImageUrl = () => {
return '/imgs/小说封面.jpg';  // 使用本地的小说封面作为默认图片
};

const truncateTitle = (description) => {
  if (description.length > 9) {
    return description.slice(0, 9) + '...'; // 截取前7个字符并加上省略号
  }
  return description; // 返回原始的描述
};


// 截断简介函数，如果长度超过 25 个字符，则用省略号表示
const truncateDescription = (description) => {
if (description.length > 50) {
  return description.slice(0, 50) + '...';
}
return description;
};

// 截断标签函数，如果长度超过 10 个字符，则用省略号表示
// 截断标签字符串函数，如果总长度超过 30 个字符，则用省略号表示
const truncateTags = (tags) => {
  const joinedTags = tags.join(", "); // 拼接所有标签为一个字符串
  if (joinedTags.length > 12) {
    return joinedTags.slice(0, 12) + '...'; // 如果拼接后的字符串超过 30 个字符，则进行截断
  }
  return joinedTags;
};



// 计算属性 - 过滤后的小说
const filteredNovels = computed(() => {
  console.log("过滤前："+JSON.stringify(novels.value,null,2));
return novels.value.filter(novel => {
  const categoryMatch = selectedCategory.value === '全部' || novel.tags.includes(selectedCategory.value);
  const themeMatch = selectedTheme.value === '全部' || novel.tags.includes(selectedTheme.value);
  const searchMatch = searchQuery.value === '' ||
    novel.title.includes(searchQuery.value) ||
    novel.description.includes(searchQuery.value) ||
    novel.tags.some(tag => tag.includes(searchQuery.value));
    console.log("过滤后："+JSON.stringify(novel,null,2));
  return categoryMatch && themeMatch && searchMatch;
});
});

// 过滤分类
const filterCategory = (category) => {
selectedCategory.value = category;
};

// 过滤题材
const filterTheme = (theme) => {
selectedTheme.value = theme;
};

// 获取所有剧本数据
const fetchNovels = async () => {
try {
  const response = await axios.get('http://localhost:8080/api/getworklist');
  console.log("剧本："+JSON.stringify(response,null,2)); // 打印 API 数据，检查字段名称是否正确

  if (response.data && response.data.code === 200) {
    const responseData = response.data.data;
    if (Array.isArray(responseData)) {
      const flattenedData = [];
      // 遍历所有的剧本数据
      for (let typeData of responseData) {
        if (Array.isArray(typeData.data)) {
          for (let work of typeData.data) {
            // 创建一个剧本对象
            const novel = {
              title: work.wname || '未知标题',
              author: work.uname || '未知作者',
              description: work.introduction || '暂无简介',
              tags: [typeData.typename], // 使用 typename 作为初始标签
              image: work.wimage,
              wid: work.wid // 保存 wid，用于后续获取题材
            };
            // 将初步创建的小说数据添加到列表
            flattenedData.push(novel);
          }
        }
      }
      novels.value = flattenedData;

      // 获取每个剧本的题材信息
      await Promise.all(novels.value.map(async (novel) => {
        try {
          const themeResponse = await axios.get(`http://localhost:8080/api/getworklabelByWid/${novel.wid}`);
          if (themeResponse.data && themeResponse.data.code === 200) {
            const themes = themeResponse.data.data;
            if (Array.isArray(themes) && themes.length > 0) {
              // 将获取的题材添加到标签中
              themes.forEach(theme => {
                novel.tags.push(theme.bname);
              });
            }
          }
        } catch (error) {
          console.error(`获取剧本 ${novel.title} 的题材失败:`, error);
        }
      }));
    } else {
      console.error('数据格式错误，期望 data 为数组:', responseData);
    }
  } else {
    console.error('获取剧本数据失败，状态码不为200:', response.data.message);
  }
} catch (error) {
  console.error('获取剧本数据失败:', error);
}
};

// 获取类别和题材
const fetchCategoryList = async () => {
try {
  const response = await axios.get('http://localhost:8080/api/getworktype');
  if (response.data.code === 200) {
    categoryList.value = ['全部', ...response.data.data.map(item => item.themename)];
  }
} catch (error) {
  console.error('获取类别数据失败:', error);
}
};

const fetchThemeList = async () => {
try {
  const response = await axios.get('http://localhost:8080/api/getworklabel');
  if (response.data.code === 200) {
    themeList.value = ['全部', ...response.data.data.map(item => item.bname)];
  }
} catch (error) {
  console.error('获取题材数据失败:', error);
}
};

// 组件挂载时获取数据
onMounted(() => {
fetchCategoryList();
fetchThemeList();
fetchNovels();
});
</script>


<style scoped>
/* 顶部导航栏 */
.heade {
    height: 80px;
    background-color: #b5babb;
}

/* 主容器 */
.market-container {
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 420px;
    /* 剧本封面与分类栏的间隔距离 */
}

/* 背景图片 */
.background-image {
    position: absolute;
    top: 80px;
    /* 背景图片距离页面顶部 */
    left: 0;
    width: 100%;
    height: 300px;
    z-index: 1;
}

/* 顶部图片 */
.top-image {
    width: 100%;
    height: 130%;
    object-fit: cover;
}

/* 搜索框的容器样式 */
.search-container {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    
    /* 增加宽度，使搜索框更协调 */
    width: 60%;
    max-width: 500px;

    /* 圆角，使搜索框更柔和 */
    border-radius: 30px;

    /* 添加背景色及透明效果 */
    background-color: rgba(255, 255, 255, 0.8);

    /* 添加阴影效果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    /* 过渡效果，使样式变化更平滑 */
    transition: box-shadow 0.3s, background-color 0.3s;
}

/* 鼠标悬停时的效果 */
.search-container:hover {
    /* 增强阴影，使其更显著 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    
    /* 略微调整背景透明度 */
    background-color: rgba(255, 255, 255, 0.9);
}

/* 搜索框内的输入框样式 */
.search-container input {
    width: 90%; /* 宽度占据容器大部分 */
    border: none;
    outline: none;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 30px; /* 圆角匹配容器样式 */
    background-color: transparent; /* 背景透明，与外层融合 */
}

/* 搜索按钮样式 */
.search-container button {
    border: none;
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 16px;
    margin-left: 10px;
    transition: background-color 0.3s;
}

/* 鼠标悬停时的按钮效果 */
.search-container button:hover {
    background-color: #45a049;
}

/* 分类部分 */
.category {
    position: absolute;
    top: 430px;
    /* 分类列表紧跟在背景图片下方 */
    left: 0;
    width: 100%;
    background-color: #f0f0f0;
    z-index: 10;
    /* 分类部分的层级高于背景图片和搜索框 */
    padding: 10px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 分类和题材的分组 */
.category-group,
.theme-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
    padding: 10px;  /* 给每个分组增加内边距 */
    background-color: #f0f0f0;  /* 白色背景 */
    border-radius: 10px;  /* 给整个分类区域增加圆角 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);  /* 给分类整体部分增加轻微阴影 */
}

/* 分类标题美化 */
.category-title { 
    font-weight: bold;
    margin-right: 15px;  /* 增加标题与内容之间的间距 */
    white-space: nowrap;
    color: #666;  /* 使用更柔和的蓝绿色调 */
    font-size: 19px;  /* 增大标题的字体大小 */
}

/* 分类列表和题材列表 */
.category-list,
.theme-list { 
    display: flex;
    flex-wrap: wrap;
    gap: 15px;  /* 增大每个标签之间的间隔 */
    list-style-type: none;
    padding: 0;
    overflow-x: auto;
    white-space: normal;  /* 允许项目换行 */
}

/* 美化类别和题材的按钮 */
.category-list li,
.theme-list li {
    padding: 10px 15px;
    background-color: #f5f5f5;  /* 柔和的灰色背景 */
    cursor: pointer;
    border-radius: 20px;  /* 设置圆角 */
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;  /* 增加过渡效果 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  /* 轻微的阴影效果，使按钮更立体 */
}

/* 悬停效果 */
.category-list li:hover,
.theme-list li:hover {
    background-color: #e0f7fa;  /* 悬停时的背景色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);  /* 增加阴影，使得按钮在悬停时更加突出 */
}

/* 选中状态的按钮 */
.category-list li.selected,
.theme-list li.selected {
    color: #ffffff;  /* 选中后字体变为白色 */
    background-color: #29b6f6;  /* 蓝色背景 */
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  /* 加深选中状态的阴影效果 */
}

/* 无结果提示信息的样式 */
.no-results {
    grid-column: 1 / -1;
    /* 占据整个展示区域 */
    text-align: center;
    padding: 20px;
    font-size: 18px;
    color: #888;
}

/* 小说展示部分 */
.novel-display {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));  /* 自动调整列数，每列最小宽度150px */
    gap: 30px; /* 剧本之间的间隙 */
    justify-content: center;
    margin-top: 150px;
    margin-bottom: 50px; /* 增加与页脚之间的间隙 */
}

/* 添加媒体查询来控制不同屏幕大小下的显示效果 */
@media (min-width: 1200px) {
    .novel-display {
        grid-template-columns: repeat(3, 1fr);  /* 当屏幕足够宽时，每行显示5列 */
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .novel-display {
        grid-template-columns: repeat(2, 1fr);  /* 中等屏幕，每行显示3列 */
    }
}
@media (max-width: 767px) {
    .novel-display {
        grid-template-columns: repeat(2, 1fr);  /* 小屏幕，每行显示2列 */
    }
}

/* 小说卡片 */
.novel-card {
    width: 90%;  /* 设置卡片宽度 */
    min-width: 390px; /* 设置卡片的最小宽度，避免过度压缩 */
    height: auto;
    background-color: #e1e2e3;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 15px;
    display: flex;
    flex-direction: row;  /* 横向排列图片和文本 */
    align-items: flex-start;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 卡片悬停效果 */
.novel-card:hover {
    background-color: #f2f2f2;
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* 小说图片 */
.novel-image {
    width: 150px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 15px;
}

/* 小说信息部分 */
.novel-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 保证描述和标签有空间分布 */
    height: 200px; /* 设置固定高度，确保布局一致 */
}
.novel-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;/*字体样式 */
}

/* 小说描述部分，位置保持固定间距 */
.novel-description {
    text-indent: 2em; /* 首行缩进 */
    margin-top: 10px; /* 控制描述部分与标题之间的距离 */
    font-size: 16px; /* 调整字体大小（根据需要进行调整） */
    color: #555;
    flex-grow: 1; /* 保持描述部分可适应内容高度变化 */
    font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif; /* 字体样式 */
    overflow: hidden; /* 防止内容溢出 */
    display: -webkit-box; /* 兼容性处理，确保多行截断生效 */
    -webkit-line-clamp: 5; /* 限制最多显示三行 */
    -webkit-box-orient: vertical; /* 垂直方向排列内容 */
}


/* 小说标签部分，始终固定在底部 */
.novel-tags {
    margin-top: 5px; /* 保持一定的间距以便于阅读 */
    font-size: 20px;
    color: #888;
    flex-shrink: 0; /* 防止标签部分缩小 */
    font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;/*字体样式 */
}

.novel-info h3 {
    font-size: 20px;
    margin-bottom: 10px;
}
.novel-info p {
    font-size: 17px;
    margin-bottom: 8px;
    color: #555;
}

</style>

